<template>
  <div class="mipaiPanel">
    <div class="slidePanel">
      <div class="mpTitle">
        <div class="mpIssue">第<span>{{nextIssue?issue:Number(issue)+1}}</span>期 开奖结果</div>
        <div class="mpOpt">
          <span @click="refreshCvs"><img src="@/assets/images/refresh3.png"/>刷新</span>
          <span @click="setmpFlag(false)"><img src="@/assets/images/close4.png"/>关闭</span>
        </div>
      </div>
      <div class="mpCvsPanel">
        <canvas id="mpCvs"></canvas>
        <div class="rstBox" v-html="lottRstHtml">
          
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import _ from "lodash";
import { mapGetters, mapActions } from "vuex";

export default {
  props: ["issue", "lottRstHtml", "mipaiFlag","timersShow"],
  beforeCreate() {},
  data() {
    return {
      nextIssue: true
    };
  },
  components: {},
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(["showMiPai"])    
  },
  methods: {
    setmpFlag: function(flag) {
      this.$emit("setmpFlag", flag);
    },
    refreshCvs: function() {
      this.initCvs();
    },
    getElementLeft: function(element) {
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;

      while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }

      return actualLeft;
    },
    getElementTop: function(element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;

      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }

      return actualTop;
    },
    initCvs: function() {
      var that = this
      var mpCvs = document.getElementById("mpCvs");
      mpCvs.setAttribute("class", "");
      var ctx = mpCvs.getContext("2d");
      mpCvs.width = 566;
      mpCvs.height = 160;
      var oLeft = that.getElementLeft(mpCvs);
      var oTop = that.getElementTop(mpCvs);
      var isStart = false;
      var radius = 10;
      var textLeftOst = mpCvs.width / 2,
        textToptOst = mpCvs.height / 2+5;
      ctx.textAlign = "center";
      ctx.textBaseLine = "middle";
      ctx.font = "21px 微软雅黑";
      ctx.fillStyle = "silver";
      ctx.fillRect(0, 0, mpCvs.width, mpCvs.height);
      if(that.timersShow==2){
        ctx.fillStyle = "#C82834";
        ctx.fillText("开奖中", textLeftOst, textToptOst);
        return false
      }else if(that.nextIssue){
        ctx.fillStyle = "#4A90E2";
        ctx.strokeStyle='#4A90E2'
        ctx.strokeRect(86,30,400,100)
        ctx.fillText("已有结果，请刮图层", textLeftOst, textToptOst);
        ctx.font = "14px 微软雅黑";
        ctx.fillText("此处为最佳刮奖区", textLeftOst, textToptOst+30);
      }
      mpCvs.onmousedown = function() {
        isStart = true;
        ctx.lineWidth = 15;
        ctx.moveTo(event.clientX - oLeft, event.clientY - oTop + window.pageYOffset);
      };
      mpCvs.onmouseup = function() {
        isStart = false;
        //  默认值
        ctx.globalCompositeOperation = "source-over";
      };

      mpCvs.onmousemove = function(e) {
        // 原有内容中与新图形不重叠的部分会被保留， 重叠的部分，没有了
        ctx.globalCompositeOperation = "destination-out";
        if (isStart&&that.timersShow!=2&&that.nextIssue) {
          ctx.lineTo(event.clientX - oLeft, event.clientY - oTop + window.pageYOffset);
          ctx.stroke();
          /* 获取imageData对象*/
          var imageDate = ctx.getImageData(0, 0, mpCvs.width, mpCvs.height); /* */
          var allPX = imageDate.width * imageDate.height;
          var iNum = 0; //记录刮开的像素点个数
          for (var i = 0; i < allPX; i++) {
            if (imageDate.data[i * 4 + 3] == 0) {
              iNum++;
            }
          }
          if (iNum >= allPX *0.5) {
            // disappear里面写了缓慢清除的css3动画效果
            mpCvs.setAttribute("class", "disappear");
          }
        }
      };
      mpCvs.onmouseleave = function(e) {
        
      };
    }
  },
  watch: {
    issue: function(newVal, oldVal){
      if(newVal!=oldVal){
        this.nextIssue=true
      }
    },
    mipaiFlag: function(newVal, oldVal) {
      if (newVal) {
        this.initCvs();
      }
    },
    showMiPai: function(newVal, oldVal){
      if(newVal==true){
        if(this.timersShow==2){
          this.nextIssue=false
        }else{
          this.nextIssue=true        
        }
        this.initCvs();
      }
    },
    lottRstHtml: {
      handler(newVal, oldVal) {
        if(this.timersShow==2){
          this.nextIssue=false
        }else{
          this.nextIssue=true        
        }
        this.initCvs()
      },
      deep: true
    },
    timersShow: function(newVal,oldVal){
      if(newVal==2){
        //开奖中
        this.nextIssue=false 
        this.initCvs()
      }
    }
  },
  beforeDestroy() {}
};
</script>
<style scoped>
@keyframes slidempPanel {
  0% {
    right: -100%;
    opacity: 1;
  }
  95% {
    right: 1%;
  }
  100% {
    right: 0%;
    opacity: 1;
  }
}
.slidePanel {
  /* animation: slidempPanel 1s forwards .2s; */
  position: absolute;
  right: 0px;
  /* opacity: 0; */
  width: 100%;
}
.disappear {
  animation: disa 2s 1 forwards;
}
@keyframes disa {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.mipaiPanel {
  position: absolute;
  right: 0px;
  width: 606px;
  top: 54px;
  z-index: 98;
  overflow: hidden;
  height: 256px;
}
.mpTitle {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0px 10px;
  justify-content: space-between;
  /* background: url(../../../../assets/images/mpTitle.png)no-repeat; */
  background-size: 100% 100%;
}
.mpIssue{font-size: 15px;}
.mpIssue span {
  color: #4a90e2;
}
.mpOpt span {
  background: #fcfcfc;
  color: #be2633;
  border-radius: 12px;
  display: inline-block;
  width: 65px;
  text-align: center;
  margin: 0px 3px;
  cursor: pointer;
}
.mpOpt span img {
  vertical-align: sub;
  margin-right: 5px;
}
.mpCvsPanel {
  height: 200px;
  /* background: url(../../../../assets/images/mpBottom.png)no-repeat; */
  background-size: 100% 100%;
  position: relative;
}
#mpCvs {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 99;
  cursor: pointer;
}
.rstBox {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 566px;
  height: 160px;
  background: #fff7cf;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<style>
.mipaiPanel .rstBox > div {
  height: 60px;
}
.mipaiPanel .rstBox > li {
  display: flex;
  align-items: center;
}
.mipaiPanel .blueText{font-size: 16px;width: auto !important;}
.mipaiPanel .colorPanel{width: auto;}
.mipaiPanel .cszBox{width: 40px;height: 40px;line-height: 38px;}
.mipaiPanel .colorPanel{width: auto;display: flex;justify-content: space-between;}
.mipaiPanel .colorPanel>div{margin-right: 10px;font-size: 16px;}
.mipaiPanel .colorBox div:last-child{font-size: 16px;}
.mipaiPanel .rorateImg1{width: 0px;height: 0px;}
.mipaiPanel .clNum{width: 45px;height: 45px;line-height: 43px;}
.mipaiPanel .jgNum{width: 45px;height: 45px;line-height: 45px;}
.mipaiPanel .jgText28{font-size: 16px;}
.mipaiPanel .sscMpPanel{width: auto;}
.mipaiPanel .sscMpPanel span{width: 54px;height: 54px;line-height: 54px;}

.mipaiPanel .sbPanel{width: 280px !important;}
.mipaiPanel .sbPanel .sbBox{width: 50px;height: 50px;}
.mipaiPanel .sbPanel div{font-size: 16px;}
</style>



// WEBPACK FOOTER //
// src/components/room/roomTitle/mipai/mipai.vue